<!--高拍仪扫描附件的组件-->

<template>
  <div class="main-content">
    <div class="content-view" v-loading="cameraLoading">
      <template v-if="taskFaceTempImgBase64">
        <img :src="taskFaceTempImgBase64" />
      </template>
      <template v-if="taskHighTempImgBase64">
        <img :src="taskHighTempImgBase64" />
      </template>
    </div>

    <div class="footer-buts">
      <el-button type="primary" @click="witness">人证比对</el-button>
      <el-button @click="witnessClose">关闭</el-button>
    </div>
  </div>
</template>

<script>
import GPYDrive from "@/api/kstb/common/hardwareDrive.js";
export default {
  data() {
    return {
      GPYDriveObj: GPYDrive,
      cameraLoading: false,
      getCameraing: false,
      //摄像头任务对象
      taskHighCamera: null,
      taskFaceCamera: null,
      taskHighTempImgBase64: "",
      taskFaceTempImgBase64: "",
      //拍照好的照片数组
      faceImgBase64: null,
      //认证比对的结果
      hasWitness: false,
    };
  },
  async created() {
    //页面加载的时候打开摄像头
    this.cameraLoading = true;
    await this.initOpenHighCamera();

    this.cameraLoading = false;
  },

  async beforeDestroy() {
    if (GPYDrive.isOpen) {
      await GPYDrive.closeHighCamera();
      await GPYDrive.closeFaceCamera();
    }
    if (this.taskHighCamera) {
      clearInterval(this.taskHighCamera);
    }
    if (this.taskFaceCamera) {
      clearInterval(this.taskFaceCamera);
    }
  },

  methods: {
    //初始化打开摄像头
    async initOpenHighCamera() {
      const highRes = await GPYDrive.openHighCamera();
      if (!highRes || highRes.code !== 200) {
        this.msgError("高拍仪摄像头连接失败！");
      }

      const faceRes = await GPYDrive.openFaceCamera();
      if (!faceRes || faceRes.code !== 200) {
        this.msgError("高拍仪摄像头连接失败！");
      }
      //启动任务
      this.startTask();
    },

    startTask() {
      const that = this;
      this.taskHighCamera = setInterval(async () => {
        const res = await GPYDrive.getHighPicture();

        if (res && res.code === 200) {
          if (res.data && res.data !== "undefined") {
            that.taskHighTempImgBase64 = `data:image/jpeg;base64,${res.data}`;
          }
        }
      }, 200);

      this.taskFaceCamera = setInterval(async () => {
        const res = await GPYDrive.getFacePicture();
        if (res && res.code === 200) {
          if (res.data && res.data !== "undefined") {
            that.taskFaceTempImgBase64 = `data:image/jpeg;base64,${res.data}`;
          }
        }
      }, 200);
    },

    closeDialog() {
      this.$emit("closeDialog");
    },

    //进行比对，并保存一张人脸照片base64

    async witness() {
      //拍摄一张人脸照片

      const resFace = await GPYDrive.getFacePicture();

      if (!resFace || resFace.code !== 200) {
        this.msgError("拍摄人脸照片失败!");
        return false;
      }

      this.faceImgBase64 = `data:image/jpeg;base64,${resFace.data}`;

      const res = await GPYDrive.personVerify();
      if (!res || res.code !== 200) {
        this.msgError(res.msg);
        return false;
      }

      console.log("最后认证评分", res.data);
      // if (res.data < 50) {
      //   this.msgError("人证比对不通过，请核验身份证和本人是否符合！");
      // }
      //保存图片
      this.msgSuccess("人证核验通过！");

      //console.log(this.faceImgBase64);

      this.hasWitness = true;
      // this.$emit("witnessSuccess", {
      //   faceImgBase64: this.faceImgBase64,
      //   hasWitness: this.hasWitness,
      // });
    },

    witnessClose() {
      this.$emit("witnessClose", {
        faceImgBase64: this.faceImgBase64,
        hasWitness: this.hasWitness,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main-content {
  .content-view {
    width: 100%;
    height: 360px;
    border: 1px #ddd solid;
    border-radius: 5px;
    display: flex;
    img {
      width: 50%;
      height: 100%;
    }
  }
  .view-img {
    margin: 20px 0;
    display: inline-flex;
    .img-div {
      display: flex;
      margin-right: 10px;
      position: relative;
      img {
        width: 150px;
        height: 100px;
        border-radius: 5px;
      }
      .el-icon-error {
        font-size: 21px;
        color: red;
        width: 21px;
        height: 21px;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
      }
    }
  }
  .option-buts {
    text-align: center;
    margin: 20px;
  }
  .footer-buts {
    text-align: center;
    margin-top: 50px;
  }
}
</style>


